<script lang='ts' setup>
import { inject, defineEmits } from 'vue'
import { Viewer, Cartesian2, Color, Cartesian3, ScreenSpaceEventHandler, ScreenSpaceEventType, ConstantPositionProperty } from 'cesium'
import * as Cesium from 'cesium'
const emit = defineEmits(['UpdateDegree'])
const viewer = inject<Viewer>('vumViewer')!
const entity = viewer.entities.add({
  position: Cartesian3.fromDegrees(120, 30),
  point: {
    show: true,
    pixelSize: 10,
    color: Color.YELLOW
  }
})

const handle = new ScreenSpaceEventHandler(viewer.canvas)
handle.setInputAction((event: any) => {
  let globe = viewer.scene.globe
  let windowPosition: Cartesian2 = event.position
  let cartesian3 = globe.pick(viewer.camera.getPickRay(windowPosition), viewer.scene)
  entity.position = new ConstantPositionProperty(cartesian3)
  if (!cartesian3) return
  let cartographic = globe.ellipsoid.cartesianToCartographic(cartesian3)
  let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7)
  let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7)
  emit('UpdateDegree', { lon, lat })
}, ScreenSpaceEventType.LEFT_CLICK)

</script>
<template>
  <slot>
  </slot>
</template>
<style lang='scss' scoped>
</style>